<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="key" clearable placeholder="姓名、手机、昵称、标签、订单来源、订单编号，模糊查询" style="width: 600px;" />
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="state" placeholder="请选择">
              <el-option v-for="item in Object.keys(OrderStateList)" :label="OrderStateList[item]"
                :value="Number(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型：">
            <el-select v-model="type" placeholder="请选择">
              <el-option :key="0" label="全部" :value="0" />
              <el-option v-for="item in Object.keys(OrderTypeList)" :label="OrderTypeList[item]" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="dateTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <!-- 列表信息 -->
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      <el-table-column prop="ctime" show-overflow-tooltip label="日期" align="center" />
      <el-table-column prop="amt1" label="调解服务" align="center" />
      <el-table-column prop="amt2" label="签约服务商" align="center" />
      <el-table-column prop="amt3" label="结清服务" align="center" />
      <el-table-column label="操作" width="180px" align="center">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary"
            @click="$router.push({ name: 'OrdersList', query: { key: key, state: state, type: type, dateTime: [row.ctime, row.ctime] } })">查看明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form :inline="true" style="padding-top: 10px;">
      <el-form-item v-if="total != null">
        <div class="flex">
          <div style="font-size: 20px;font-weight: bold;">统计:</div>
          <div style="margin-left: 20px;">【调解服务: {{ total.amt1 }} 】</div>
          <div style="margin-left: 20px;">【签约服务商: {{ total.amt2 }} 】</div>
          <div style="margin-left: 20px;">【结清服务: {{ total.amt3 }} 】</div>
        </div>
      </el-form-item>
    </el-form>

    <div class="block " style="padding-top: 20px;">
      <el-pagination background :current-page="pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="idx => { pageSize = idx }"
        @current-change="idx => { pageIndex = idx }" />
    </div>

  </div>
</template>

<script>
import { GetDayPageView } from "@/api/sorder.js";
import { GetEnum, coinlist } from "@/api/ctrls.js";
export default {
  name: "Name",
  data() {
    return {
      key: "", // 关键词
      state: 0, // 订单状态
      type: 0,
      dateTime: "", // 时间查询


      listLoading: false,
      tableData: [],
      totalCount: 0,
      pageIndex: 1,
      pageSize: 10,
      total: {},

      OrderStateList: {}, // 订单状态
      OrderTypeList: {}, // 订单类型
      coinList: [],

      modalStatus: 0, // 打开组件弹窗参数
      currentInfo: {}, // 当前用户信息
      currentId: {},

      exportLoading: false
    };
  },
  watch: {
    pageIndex(val) {
      console.log(val);
      this.getData();
    },
    pageSize(val) {
      this.getData()
    },
    modalStatus(val) {
      this.getData()
    }
  },
  created() {

  },
  mounted() {
    this.getData();
    this.GetEnum();
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.getData();
    },
    //////////////////////////////////////////// 导出/导入 /////////////////////////////////////////////
    // 导出报表
    async doExport(name) {
      this.exportLoading = true
      const res = await sorderExcel({
        key: this.key,
        state: this.state,
        type: this.type,
        stime: this.dateTime ? this.dateTime[0] : "",
        etime: this.dateTime ? this.dateTime[1] : "",
      })
      this.exportLoading = false
      if (res) {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        let num = ''
        for (let i = 0; i < 10; i++) {
          num += Math.ceil(Math.random() * 10)
        }
        const fileName = this.dateTime[0]
          ? this.dateTime[0] + "-" + this.dateTime[1] + "订单列表.xlsx"
          : "订单列表.xlsx";
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
    },
    // ////////////////////////////////////////// 数据请求 /////////////////////////////////////////////
    // 获取枚举
    async GetEnum() {
      const res = await GetEnum();
      this.OrderStateList = res.data['OrderState'];
      this.OrderTypeList = res.data['OrderType'];
    },
    // 获取币种
    async GetCoin() {
      const res = await coinlist();
      this.coinList = res;
    },
    /**获取主列表 */
    async getData() {
      this.listLoading = true;
      const { list, pageIndex, totalCount,_total } = await GetDayPageView({
        key: this.key,
        state: this.state,
        type: this.type,
        stime: this.dateTime ? this.dateTime[0] : "",
        etime: this.dateTime ? this.dateTime[1] : "",
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      });
      this.totalCount = totalCount;
      this.total = _total;
      this.tableData = []
      console.log(list)
      list.forEach(element => {
        element.ctime = element.ctime.substring(0, element.ctime.indexOf('T'))
        this.tableData.push(element)
      })
      this.listLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

// 上传图片相关样式
.avatar-uploader .el-upload {
  width: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
